<template>
    <el-select v-loading="loading" :value="value+''"  @input="$emit('input', $event)"  :style="{width: width+'%'}" filterable popper-class="select_user_input"
      :placeholder="placeholder" clearable :disabled="disabled" @change="onChangeUser">
          <el-option
            v-for="its in dataList"
            :key="its.id"
              :label="its.realName"
            :value="its.id">
            </el-option>
    </el-select>
</template>
<script>

export default {
  name: 'SelectClientUserInfo',
  data () {
    return {
      dataList: [],
      placeholder: this.$t('custom.component.selectClientUserInfo.placeholder'),
      loading: false
    }
  },
  props: {
    value: [Number, String],
    disabled: Boolean,
    width: Number
  },
  created () {
    this.getUserList()
  },
  methods: {
    getUserList () {
      this.loading = true
      const param = {
        status: 1
      }
      this.$interface.schedule.getWorkScheduledUserListApi(param)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            this.dataList = res.data
          }
          this.dataList = res.data
        }).catch(() => {
          this.loading = false
        })
    },
    onChangeUser (data) {
      let item = this.dataList.find(e => e.id === data)
      this.$emit('ChangeClientUserInfo', item)
    }
  }
}
</script>
<style lang="scss">
.select_user_input{
  .el-select-dropdown__item{
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    line-height: normal;
  }

}
</style>
